<template>
	<view class="contract uni-flex-column">
		<CustomNavBar class="navbar" title="我要签约">
			<template v-slot:left>
				<view class="back uni-flex uni-align-center uni-justify-center" @click="goBack"><uni-icons type="left"
						size="20"></uni-icons></view>
			</template>
		</CustomNavBar>
		<view class="box_1 uni-flex-item">
			<radio-group @change="radioChange">
				<view class="content uni-flex uni-align-center" :class="{ active: checkvalue === '1' }"
					@click="userType !== 'FREE_SERVER' && userType !== 'SIGN_SERVER'?handleContentClick(1):(userType === 'FREE_SERVER' ? handleContentClick(1) : '')">
					<label class="radio" v-if="userType !== 'FREE_SERVER' && userType !== 'SIGN_SERVER'">
						<radio value="1" :checked="checkvalue === '1'" color="#2F80ED" />
					</label>
					<image v-if="userType === 'FREE_SERVER' || userType === 'SIGN_SERVER'"
						:src="`${$ImgBaseUrl}Signed-img.png`" class='Signed-img'>
					</image>
					<view class="text-group">
						<view class="text_1">自由服务者</view>
						<view class="text_2">自由接单、随心工作，时间由你掌控。</view>
					</view>
					<image class="image_icon1" :src="`${$ImgBaseUrl}freedom.png`" />
				</view>
				<view class="content uni-flex uni-align-center" :class="{ active: checkvalue === '2' }"
					@click="handleContentClick(2)">
					<label class="radio" v-if="userType !== 'SIGN_SERVER'">
						<radio value="2" :checked="checkvalue === '2'" color="#2F80ED" />
					</label>
					<image v-if="userType === 'SIGN_SERVER'" :src="`${$ImgBaseUrl}Signed-img.png`" class='Signed-img'>
					</image>
					<view class="text-group">
						<view class="text_1">零付服务者</view>
						<view class="text_2">长效签约接单稳，平台护航保权益；外派服务有保障，高效创收更安心。</view>
					</view>
					<image class="image_icon2" :src="`${$ImgBaseUrl}contract.png`" />
				</view>
			</radio-group>

			<view class="btn" @click="addContract" v-if=" userType !=='SIGN_SERVER'">
				<text class="text_4">下一步</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavBar from '@/components/custom-navbar/index.vue';
	import {
		ref,
		onMounted
	} from "vue";
	import { addService } from "@/api/contract.js";
	
	// 响应式数据：初始化不选中任何选项
	const checkvalue = ref('');
	const userType = ref('');

	const radioChange = (evt) => {
		checkvalue.value = evt.detail.value;
	};
	
	const handleContentClick = (value) => {
		// 确保值为字符串类型，与checkvalue保持一致
		const stringValue = String(value);
		checkvalue.value = stringValue;

		// 修正判断条件：用户类型为自由服务者且点击自由服务者选项
		if (userType.value === "FREE_SERVER" && stringValue === "1") {
			uni.showToast({
				title: '您已成为了自由服务者！',
				icon: 'none',
				duration: 2000
			});
			return;
		}

		// 如果是签约服务者点击签约服务者选项
		if (userType.value === "SIGN_SERVER" && stringValue === "2") {
			uni.showToast({
				title: '您已成为了签约服务者！',
				icon: 'none',
				duration: 2000
			});
			return;
		}

		// 其他情况允许选择
		radioChange({
			detail: {
				value: stringValue
			}
		});
	};

	const addContract = () => {

		// 如果已经是自由服务者且选择了自由服务者选项
		if (userType.value === "FREE_SERVER" && checkvalue.value === "1") {
			uni.showToast({
				title: '您已成为了自由服务者！',
				icon: 'none'
			});
			return;
		}

		// 如果已经是签约服务者且选择了签约服务者选项
		if (userType.value === "SIGN_SERVER" && checkvalue.value === "2") {
			uni.showToast({
				title: '您已成为了签约服务者！',
				icon: 'none'
			});
			return;
		}

		// 未选择任何选项时提示
		if (!checkvalue.value) {
			uni.showToast({
				title: '请选择服务者类型',
				icon: 'none'
			});
			return;
		}

		// 其他情况跳转
		uni.navigateTo({
			url: `/pages/contract/addContract?type=${checkvalue.value}`,
		});
	};
	
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	};
	
	onMounted(() => {
		try {
			const userInfo = JSON.parse(uni.getStorageSync('user_info') || '{}');
			console.log('userInfo', userInfo);
			userType.value = userInfo.userType || '';
			console.log('userType.value',userType.value);
			checkvalue.value = '';
		} catch (e) {
			console.error('解析用户信息失败', e);
			userType.value = '';
		}
	})
</script>

<style scoped lang="scss">
	.contract {
		height: 100vh;
		background: radial-gradient(52% 101% at 16% 6%, #E2EFFF 0%, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0) 100%);

		.navbar {
			width: 100%;
		}

		.back {
			width: 44rpx;
			height: 44rpx;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 50%;
		}
	}

	.box_1 {
		overflow-y: auto;
		padding: 156rpx 24rpx 266rpx;

		.active {
			border: 2rpx solid #2F80ED;
		}

		.content {
			margin: 0 0 159rpx;
			padding-left: 44rpx;
			height: 294rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: relative;

			.text-group {
				width: 294rpx;
				margin: 0 17rpx 0 35rpx;

				.text_1 {
					font-weight: 600;
					font-size: 36rpx;
					color: #333333;
					line-height: 50rpx;
					margin-bottom: 24rpx;
				}

				.text_2 {
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
				}
			}

			.Signed-img {
				width: 179rpx;
				height: 190rpx;
				margin-right: 20rpx;
				position: absolute;
				top: 35rpx;
				left: 33rpx;

			}

			.image_icon1 {
				width: 250rpx;
				height: 363rpx;
				position: absolute;
				right: 22rpx;
				top: -71rpx;
			}

			.image_icon2 {
				width: 227rpx;
				height: 386rpx;
				position: absolute;
				right: 22rpx;
				top: -92rpx;
			}
		}

		.btn {
			width: 86%;
			height: 88rpx;
			background: #2F80ED;
			border-radius: 44rpx;
			text-align: center;
			font-weight: 600;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			margin: 0 auto;
		}
	}
</style>
